<template>
  <div class="form-container">
    <div class="left-side">
      <el-form id="biao" style="padding: 0px;width: 100%;border: 0px;">
        <el-input type="text" placeholder="内容" v-model="username"
                  style="margin-top: 30px;padding: 0px;width: 100%;height: 50px;border: 0px;">
          <template #prefix>
            <el-icon>
              <User/>
            </el-icon>
          </template>
        </el-input>
        <el-button type="success" round id="login" @click="addItem" style="margin-top: 30px;
				text-align: center;font-size: 30px;padding: 10px;width: 100%;height: 50px;padding: 0px;border: 0px;">添加学习内容
        </el-button>
      </el-form>
      <el-form id="biao" style="padding: 0px;width: 100%;border: 0px;">
        <el-input type="text" placeholder="内容" v-model="zuijia"
                  style="margin-top: 30px;padding: 0px;width: 100%;height: 50px;border: 0px;">
          <template #prefix>
            <el-icon>
              <User/>
            </el-icon>
          </template>
        </el-input>
        <el-button type="success" round id="login" @click="editItem" style="margin-top: 30px;
				text-align: center;font-size: 30px;padding: 10px;width: 100%;height: 50px;padding: 0px;border: 0px;">修改学习内容
        </el-button>
      </el-form>
    </div>
    <div class="middle-side">
      <table v-if="items.length > 0">
        <thead>
        <tr>
          <th>学习时间</th>
          <th>学习内容</th>
          <!-- 根据实际情况添加更多表头 -->
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in items" :key="item.id">
          <td>{{ item.sj }}</td>
          <td>{{ item.nr }}</td>
          <!-- 根据实际情况展示更多字段 -->
        </tr>
        </tbody>
      </table>
      <p v-else>暂无数据。</p>
    </div>
    <div class="right-side">
      <table v-if="items2.length > 0">
        <thead>
        <tr>
          <th>复习时间</th>
          <th>复习内容</th>
          <!-- 根据实际情况添加更多表头 -->
        </tr>
        </thead>
        <tbody>
        <tr v-for="item2 in items2" :key="item2.id">
          <td>{{ item2.sj }}</td>
          <td>{{ item2.nr }}</td>
          <!-- <td>{{ item2.review3 }}</td> -->
          <!-- 根据实际情况展示更多字段 -->
        </tr>
        </tbody>
      </table>
      <p v-else>暂无数据。</p>
    </div>
  </div>
</template>
<script setup>
import {
  wcao,
  post
} from "@/http";
import {
  User,
  Lock
} from "@element-plus/icons-vue";
import {
  ref, computed,
  reactive
} from 'vue'
import {
  ElMessage
} from "element-plus";
import router from "@/router";

const username = ref("");
const zuijia = ref("");
const items = ref([]);
const items2 = ref([]);
const addItem = () => {
  // 实现新增逻辑
  if (username.value == "" || username.value == null) {
    ElMessage.warning("请输入学习内容")
  } else {
    post('/learn/xue', {
      nr: username.value
    }, (msg) => {
      console.log('接收到后端的返回数据:' + msg);
      ElMessage.success(msg);
      loadxueData();
      loadfuxiData();
    }, (msg) => {
      ElMessage.warning(msg)
    })
  }
};

const editItem = () => {
  // 实现追加逻辑
  if (zuijia.value == "" || zuijia.value == null) {
    ElMessage.warning("请输入学习内容")
  } else {
    post('/learn/zuijia', {
      nr: zuijia.value
    }, (msg) => {
      console.log('接收到后端的返回数据:' + msg);
      ElMessage.success(msg);
      loadxueData();
      loadfuxiData();
    }, (msg) => {
      ElMessage.warning(msg)
    })
  }
};

const loadxueData = () => {
  wcao('/learn/xuewan', {}, (res) => {
    items.value = res.message;
  }, (res) => {
    ElMessage.warning(res.message)
  })
};
const loadfuxiData = () => {
  wcao('/learn/fuxi', {}, (res) => {
    items2.value = res.message;
  }, (res) => {
    // ElMessage.warning(res.message)
  })
};
loadxueData();
loadfuxiData();

</script>

<style scoped>
.form-container {
  display: flex;
  height: 100%;
}

.left-side {
  width: 20%;
  padding: 10px;
  background-color: burlywood;
  position: relative;
}

.middle-side {
  width: 40%;
  padding: 10px;
  background-color: bisque;
  position: relative;
}

.right-side {
  width: 40%;
  padding: 10px;
  background-color: beige;
  position: relative;
}


table {
  width: 100%;
  display: inline-block;
  padding: 0px;
  position: relative;
}


tr th:nth-child(1) {
  width: 15%;
}

/* tr th:nth-child(2) {
  width: 50%;
} */
tr td:nth-child(1) {
  width: 15%;
}

tr {
  border-radius: 10px;
}

th,
td {
  width: 100%;
  border: 1px solid seagreen;
  padding: 8px;
  border-radius: 10px;
}

/* 调整按钮和输入框间距 */
.left-side .el-form {
  margin-bottom: 20px; /* 添加表单之间的间距 */
}

/* 表格表头背景色和隔行换色 */
table th {
  background-color: #95d475; /* 表头背景色 */
}

table tr:nth-child(even) {
  background-color: #deb887; /* 隔行换色 */
}

/* 调整表格边框样式 */
th, td {
  border-color: #ddd; /* 边框颜色 */
}
</style>